{% extends "./inc_baseNew.html" %}
{% block content %}
{%set cate = category.id|get_cate()%}
{%if category.pid !=0 %}
{%column data="column",pid=category.pid%}
{%else%}
{%column data="column",cid=category.id%}
{%endif%}
<!--
PAGE HEADER

CLASSES:
.page-header-xs	= 20px margins
.page-header-md	= 50px margins
.page-header-lg	= 80px margins
.page-header-xlg= 130px margins
.dark			= dark page header

.shadow-before-1 	= shadow 1 header top
.shadow-after-1 	= shadow 1 header bottom
.shadow-before-2 	= shadow 2 header top
.shadow-after-2 	= shadow 2 header bottom
.shadow-before-3 	= shadow 3 header top
.shadow-after-3 	= shadow 3 header bottom
-->


<link href="/static/assets/css/layout.min.css" rel="stylesheet" type="text/css" />
<link href="/static/assets/css/layout-shop.css" rel="stylesheet" type="text/css" />

<style>
    section{
        border-bottom: 0;
        padding-bottom: 0;
    }
     section.page-header{
         background-color: #f4f4f4;
         border-bottom:0;
     }
     .panel-heading {
        margin: 0 15px;
        padding: 10px 15px;
        border-bottom: 1px solid #ddd;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }
    .nomargin {
        margin: 0 !important;
    }

    .text-right {
        text-align: right !important;
        box-sizing: border-box;
    }

    .list-inline>li {
        display: inline-block;
        padding-right: 5px;
        padding-left: 5px;
    }
    .tabs .panel-heading .nav {
        margin: -11px -16px;
    }

    pre,
    .alert,
    .panel,
    .navbar-toggle,
    .btn {
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }

    .tab-content {
        padding-top: 15px;
    }

    .tab-post {
        padding-bottom: 10px;
        margin: 0 0 10px 0;
        border-bottom: rgba(0, 0, 0, 0.06) 1px solid;
    }

    .blog-post-item {
        display: block;
        margin-bottom: 10px;
        padding-bottom: 0;
        border-bottom: #eee 1px solid;
        position: relative;
    }
    .page-header ul.page-header-tabs>li {
        background-color:#f4f4f4;
        font-size: 16px;
        font-weight: 300;
    }
    .nav-tabs.nav-justified>.active>a,
    .nav-tabs.nav-justified>.active>a:focus,
    .nav-tabs.nav-justified>.active>a:hover {
        border-bottom-color: #fff;
    }

    .page-header.dark ul.page-header-tabs>li.active:hover,
    .page-header ul.page-header-tabs>li.active {
        background-color: #f4f4f4;
        font-weight: 400;
        color: #ed1a24;
        border-bottom: 1px solid;
    }

    .page-header ul.page-header-tabs>li.active>a {
        color: #ed1a24;
    }

    .nav-tabs .active {
        border: 1px solid #ddd;
        border-bottom: 1px solid #f4f4f4;
        background-color: #f4f4f4;
        color: #fff;
    }

    .nav-tabs a {

        padding: 6px 20px 0 20px;
    }
    .blog-item-small-image img{
        width: 210px;
        height: 120px;
    }
    ul.blog-post-info{
        padding-bottom:0;
    }
    .blog-post-item .blog-item-small-image {
        margin:1rem;
    }
    .blog-post-item .blog-item-small-image+.blog-item-small-content {
        padding:1rem 1rem 0 0;
    }
    .panel-body ul li img {
    width: 210px;
    height: 120px;
    display: inline-block;
}
.panel-body ul li div div{
    height:33%;
}
.panel-body ul li span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 16px;
}
.panel-body ul li div div:nth-child(2) span{
    font-size:13px;
    color: #b0b0b0;
    height: 15px;
    line-height: 15px;
}
.panel-body ul li div div:nth-child(3) span{
    font-size:13px;
    color: #b0b0b0;
    height: 15px;
    line-height: 15px;
}
</style>

<section class="page-header page-header-xs "  style="padding-top: 0;">
    <div class="container">
        {%if column|length>0%}
        <h1></h1>
        {%endif%}
        <!-- page tabs -->

        {%if column|length>0%}
        <ul class="page-header-tabs list-inline">
                {% set keyname = controller.get('keyname')%}
                {%if groups and groups.length > 0%}
                <li class="nav-item dropdown {%if breadcrumb[0].id == category.id %}active{%endif%}"> 
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                {{keyname or '全部信息'}}
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                <a class="dropdown-item {%if not keyname %}active{%endif%}" href="/{{category.id}}">全部信息</a>
                                {% for group in groups %}
                                    <a class="dropdown-item {%if keyname == group %}active{%endif%}" href="/{{category.id}}?keyname={{group}}">{{group}}</a>
                                {% endfor %}
                        </div>
                    </li>
                {%else%}
                <li {%if breadcrumb[0].id == category.id %}class="active" {%endif%}><a href="{{breadcrumb[0].url}}">全部信息</a>
                </li>
                {%endif%}
            {%for val in column%}
            <li {%if val.id == category.id %}class="active" {%endif%}><a href="{{val.url}}{% if keyname %}?keyname={{keyname}}{%endif%}">{{val.name}}</a></li>
            {%endfor%}
        </ul>
        {%endif%}
        <!-- /page tabs -->
    </div>
</section>
<!-- /PAGE HEADER -->
<!-- -->
<section>
    <div class="container">
        <div class="row">
            <!-- LEFT -->
            <div style="padding-left: 15px;width: 940px;">
                <div class="panel panel-default">
                    <div class="panel-body padding-10">
                            <ul>
                                    {% for val in list %}  
                                    <li style="background-color: #fff; padding:1rem;margin-bottom: 10px;">
                                    <a href="{{val.name|get_url(val.id)}}" class="row">
                                    <div class="col-3"> 
                                    
                                    <img class="img-responsive" src="{{val.cover_id|get_pic('m=1,w=200,h=120')}}" alt="">
                                    
                                    </div>
                                    
                                    <div class="col-9">
                                    <div class="row align-items-center f-16 "><span >{{val.title}}</span></div>
                                     <div class="row align-items-center f-16 "><span>{{val.description|truncate(90, true, "...")}}</span></div>
                                    <div class="row align-items-center  justify-content-left f-16"><span>{{val.create_time|moment('YYYY.MM.DD')}}</span></div>                                    
                                    </div>
                                    </a>
                                    </li>
                                    {%endfor%}
                                </ul>
                    </div>
                    {%if totalPages>1%}
                    <div class="panel panel-default form-inline" style="justify-content: center;">
                            <nav aria-label="Page navigation">
                                    <ul class="pagination flex-wrap">
                                      <li class="page-item">
                                        <a class="page-link" href="{{ctx.path}}?page={{page|int-1 or 1}}&{{ctx.query|query_string(['page'])}}" aria-label="Previous">
                                          <span aria-hidden="true">&laquo;</span>
                                          <span class="sr-only">Previous</span>
                                        </a>
                                      </li>
                                      {% for i in range(1, totalPages+1) -%}
                                      <li class="page-item {% if i==page%}active {%endif%}"><a class="page-link" href="{{ctx.path}}?page={{i}}&{{ctx.query|query_string(['page'])}}">{{ i }}</a></li>
                                      {%- endfor %}
                                      <li class="page-item">
                                        {% set nextpage = page|int+1%}{%if nextpage>totalPages %} {% set nextpage= totalPages %}{%endif%}
                                        <a class="page-link" href="{{ctx.path}}?page={{nextpage}}&{{ctx.query|query_string(['page'])}}" aria-label="Next">
                                          <span aria-hidden="true">&raquo;</span>
                                          <span class="sr-only">Next</span>
                                        </a>
                                      </li>
                                    </ul>
                                  </nav>
                            <div class="form-inline"  ><span style="margin: 0 1rem">到</span><input style="width: 60px;" type="number" name="pagenum" min="1" max="5" class="form-control form-control-sm mb-2 mr-sm-2"><span style="margin: 0 1rem 0 .5rem ">页</span><a class="page-link" href="javascript:gotoPage();" aria-label="Next">确定</a></div>
    
                    </div>
                    {%endif%}  
                </div>

            </div>

            <!-- RIGHT -->

            {% include "./inc_right.html"%}
        </div>

    </div>
</section>
<!-- / -->
{% endblock %}
{% block script%}
<script>
var totalPages = {{totalPages}};
</script>
{% endblock %}